<template>
  <a-spin :tip="LoadingText" :spinning="spinning" class="example">
    <div class="add-order">
      <div class="ordered-goods">
        <div class="ordered-title">
          <div class="ordered-title-chiose">
            <!-- 选择商品 ({{ this.orderedList.length }}) -->
            订单信息
          </div>
        </div>

        <div class="ordered-content">
          <div
            class="ordered-top"
            style="display: flex; justify-content: space-between"
          >
            <div>
              <div class="ordered-info">
                <span class="infoName">员工姓名: </span>
                <span class="info-de">
                  {{ this.userList.realName || userInfo.nickName }}
                </span>
              </div>
              <div class="ordered-info">
                <span class="infoName">员工电话: </span>
                <span class="info-de">
                  {{ this.userList.phonenumber || "-" }}
                </span>
              </div>
              <div class="ordered-info">
                <span class="infoName">员工ID: </span>
                <span class="info-de">
                  {{ this.userList.userName || "-" }}
                </span>
              </div>
              <div>
                <span class="infoName">饭卡余额: </span>
                <span class="info-de">
                  <!-- {{ this.deatilData.id || "-" }} -->
                  -
                </span>
              </div>
            </div>
            <div class="ordered-title-clear" @click="clearPlaceOrder">取消</div>
          </div>
          <!-- <div class="content-footer"> -->
          <div class="ordered-content-body">
            <div
              class="ordered-content-item"
              v-for="(item, index) in orderedList"
              :key="index"
            >
              <!-- <div class="ordered-item-index">{{ index + 1 }}</div> -->
              <div class="ordered-item-index">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="ordered-item-right">
                <div class="coffee-right">
                  <div class="coffee-p">
                    <span class="coffee-name">{{ item.goodName }}</span>
                  </div>
                  <div style="display: flex">
                    <div class="Coffee-specification">
                      规格: {{ item.coffeeType }}
                    </div>
                    <div class="Coffee-specification2">
                      {{ item.sugarType ? item.sugarType : "" }}
                    </div>
                  </div>
                </div>
                <!-- <div class="ordered-item-num">x {{ item.choiseNum }}</div> -->
                <span class="ordered-item-price">{{ itempic(item) }} 元</span>
                <!-- <span class="ordered-item-delete" @click="orderedDelete(index)"
                >删除</span
              > -->
                <div class="coffee-number">
                  <span class="icon-min" @click="minus(item, index)">
                    <a-icon type="minus" />
                  </span>
                  <span class="number">{{ item.choiseNum }}</span>
                  <span class="icon-add" @click="plus(item, index)">
                    <a-icon type="plus" />
                  </span>
                </div>
              </div>
            </div>
            <div style="margin: 0 20px">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <div class="remarkText">备注</div>
                <div class="ordered-clear" @click="clearRemark">清除</div>
              </div>
              <div class="remark">
                <textarea
                  v-model="remink"
                  cols="42"
                  rows="5"
                  placeholder="请输入口味、偏好等要求，不支持额外代购其他物品哦，这里是其他备注。"
                ></textarea>

                <p class="remink-title">快捷输入</p>
                <div class="remink-group">
                  <div
                    v-for="(option, index) in reminkList"
                    :key="index"
                    class="remink-option"
                    @click="selectRemink(index)"
                  >
                    {{ option }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- </div> -->
        </div>
        <div class="ordered-foot">
          <div class="ordered-price">
            <div>共计{{ rawResulttotel }}件</div>
            <div>
              应付<span> {{ this.orderPrice() }}</span> 元
            </div>
          </div>
          <div
            class="ordered-foot-btn"
            key="back"
            size="large"
            @click="placeOrder"
          >
            下单
          </div>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="order-right-body">
        <div class="order-right-top">商品列表</div>
        <div class="order-right">
          <div
            class="goods"
            v-for="(item, index) in orderData"
            :key="index"
            @click.stop="goodsItem(item)"
          >
            <div class="coffee-goods">
              <div class="coffee-goods-img">
                <img :src="item.imgUrl" alt="" />
                <div class="zhaopI">招牌</div>
              </div>
              <div class="coffee-right">
                <!-- <div class="coffee-p"> -->
                <span class="goodName" style="margin-top: 10px">{{
                  item.goodName
                }}</span>
                <div class="des">
                  <span>月售{{ item.monthlySalesInfo }}</span>
                  <span class="desClass">{{ item.describeInfo }}</span>
                </div>
                <div class="price-left">
                  <div class="icon">¥</div>
                  <div class="text">{{ item.price }}</div>
                </div>
                <!-- <span class="specs">{{ item.specs }}</span>
              <span class="price">{{ item.price }}</span> -->
                <!-- </div> -->
                <!-- <div class="selected">已选规格: {{ item.price }}</div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="order-clear-right" @click="clearPlaceOrder">取消</div>
      </div>

      <div class="choseClass" ref="layoutContent">
        <a-modal
          :getContainer="() => this.$refs.layoutContent"
          class="chioseModal"
          :footer="null"
          v-model="visible"
          on-ok="handleOk"
        >
          <template slot="title">
            <div style="font-weight: 800">
              <!-- <a-icon type="form" style="font-size: 24px" /> -->
              <div style="text-align: center">选择规格</div>
            </div>
          </template>
          <div class="coffee-item">
            <!-- <img class="coffee-img" :src="selectItem.imgUrl" alt="" /> -->
            <div style="width: 100%">
              <div class="coffee-goodName">{{ selectItem.goodName }}</div>
              <div class="coffee-guige">规格</div>
              <div class="radio-group">
                <div
                  v-for="(option, index) in selectItem.specslist"
                  :key="index"
                  class="radio-option"
                  :class="{ 'selected-text': selectedIndex === index }"
                  @click="selectOption(index)"
                >
                  {{ option }}
                </div>
              </div>
              <div v-if="selectItem.goodName != '美式'">
                <p class="tang-title">甜度</p>
                <div class="tang-group">
                  <div
                    v-for="(option, index) in selectItem.sugalist"
                    :key="index"
                    class="tang-option"
                    :class="{ 'selected-text': selectTangIndex === index }"
                    @click="selectTang(index)"
                  >
                    {{ option }}
                  </div>
                </div>
              </div>

              <p class="selectedOption">已选规格：{{ selectedOption }}</p>
              <div class="coffee-footer">
                <div class="coffee-number">
                  <span class="icon-min" @click="minNum">
                    <a-icon type="minus" />
                  </span>
                  <span class="number">{{ choiseNum }}</span>
                  <span class="icon-add" @click="plusNum">
                    <a-icon type="plus" />
                  </span>
                </div>

                <div slot="footer">
                  <a-button
                    key="back"
                    size="large"
                    type="primary"
                    @click="addCar()"
                  >
                    加入购物车
                  </a-button>
                </div>
              </div>
            </div>
          </div>
        </a-modal>
      </div>
      <!-- 选择商品 -->
      <!-- <TableList
      :columns="columns"
      :dataSource="orderData"
      :pagination="false"
      :tableLoading="loading"
      :total="total"
      size="middle"
      pk="key"
      @queryData="getDatas"
      @editClick="editClick"
    /> -->
    </div>
  </a-spin>
</template>
<script>
import helper from "@/helper/helper";
import TableList from "./addOrderTable.vue";
import store from "@/store";

import {
  listOrders,
  getOrderInfo,
  getOrderFrontInfo,
  findUpGoodsType,
  addOrder,
} from "@/api";
export default {
  name: "Form",
  components: {
    TableList,
  },
  data() {
    return {
      LoadingText: "",
      spinning: false,
      reminkList: [201, 202, 203, 204, 205, 206, 207, 208, 209, 101, 103],
      userList: {},
      remink: "", //备注
      coffeeNumber: 1, //数量
      coffeeNumber1: 1, //数量
      visible: false,
      selectItem: {}, //点击弹窗数据
      choiseNum: 1,
      selectedIndex: 0, // 初始化选中第一个选项
      selectedOption: "",
      selectTangIndex: 0,
      selectTangOption: null,
      total: 0,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      loading: false,
      columns: [
        { title: "序号", key: "no", scopedSlots: { customRender: "no" } },
        {
          title: "商品图片",
          key: "imgUrl",
          scopedSlots: { customRender: "pic" },
        },

        { title: "名称", dataIndex: "goodName", key: "goodName" },
        {
          title: "规格",
          key: "specs",
          scopedSlots: { customRender: "specification" },
        },
        { title: "价格", dataIndex: "price", key: "price" },
        {
          title: "操作项",
          key: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "150px",
        },
      ],
      orderData: [],
      orderedList: [], //加入购物车列表
    };
  },
  mounted() {
    this.getDatas();
  },

  computed: {
    rawResult() {
      return this.orderedList.reduce((accumulator, coffee) => {
        const price = parseFloat(coffee.price * coffee.choiseNum);
        if (!isNaN(price)) {
          return accumulator + price;
        }
        return accumulator;
      }, 0); // 初始累加器值为0
    },
    rawResulttotel() {
      return this.orderedList.reduce((accumulator, coffee) => {
        if (coffee.choiseNum) {
          return accumulator + coffee.choiseNum;
        }
        return accumulator;
      }, 0); // 初始累加器值为0
    },
    userInfo() {
      return store.getters.userInfo;
    },
  },
  methods: {
    selectRemink(index) {
      this.selectReminkIndex = index;
      // this.selectReminkOption = this.reminkList[index];
      console.log(this.reminkList[index]);
      this.remink = this.remink + this.reminkList[index];
    },
    clearRemark() {
      this.remink = "";
    },
    minus(item, index) {
      if (this.orderedList[index].choiseNum > 1) {
        this.orderedList[index].choiseNum--;
      } else {
        this.orderedList.splice(index, 1);
      }
    },
    plus(item, index) {
      this.orderedList[index].choiseNum++;
    },

    // 总价
    orderPrice() {
      return this.rawResult.toFixed(2);
    },
    //每项单价
    itempic(item) {
      const data = parseFloat(item.price) * item.choiseNum;
      return data.toFixed(2);
    },
    minNum() {
      if (this.choiseNum > 0) {
        this.choiseNum--;
      }
    },
    plusNum() {
      this.choiseNum++;
    },
    selectOption(index) {
      this.selectedIndex = index;
      this.selectedOption = this.selectItem.specslist[index];
    },
    selectTang(index) {
      this.selectTangIndex = index;
      this.selectTangOption = this.selectItem.sugalist[index];
    },

    goodsItem(item) {
      console.log(item, "222");
      this.visible = true;
      this.selectItem = item;
      this.selectOption(0);
      this.selectTang(0);
    },
    editClick() {},
    getDatas() {
      findUpGoodsType().then((res) => {
        this.orderData = res.data[0].goods.map((item) => {
          return {
            imgUrl: item.imgUrl,
            goodName: item.goodName,
            specs: item.specs,
            price: item.price + "元",
            unitPrice: item.price,
            id: item.id,
            specslist: item.specslist,
            sugalist: item.sugalist,
            describeInfo: item.describeInfo,
            monthlySalesInfo: item.monthlySalesInfo,
            // number: 0,
          };
        });
      });
    },

    addCar() {
      if (this.choiseNum < 1) {
        return this.$message.error("请选择数量");
      }
      let dataList = { sizeNum: this.choiseNum };
      getOrderFrontInfo(dataList).then((res) => {
        if (res.code === 200) {
          // console.log(res);
          this.userList = res.user;
          // this.deatilData = res.data;
        }
      });
      this.visible = false;
      console.log(this.selectItem, "this.selectItem");
      const data = {
        price: this.selectItem.unitPrice, //单价
        coffeeType: this.selectedOption, //规格
        goodName: this.selectItem.goodName, //名称
        imgUrl: this.selectItem.imgUrl, //图片
        id: this.selectItem.id, //id
        choiseNum: this.choiseNum, //数量
        sugarType: this.selectTangOption,
      };
      this.orderedList.push(data);
      // 清空数据
      this.choiseNum = 1;
      this.selectedOption = "";
    },

    clearPlaceOrder() {
      // 清空数据
      this.$emit("clearOrder");
      // this.visible = false;
      this.orderedList = [];
    },
    // 下单
    placeOrder() {
      this.spinning = true;
      this.LoadingText = "正在下单...";
      const coffeeGoods = [];
      this.orderedList.map((item) => {
        for (let i = 0; i < item.choiseNum; i++) {
          // console.log("这是第 " + (i + 1) + " 次循环");
          coffeeGoods.push({
            coffeeType: item.coffeeType,
            id: item.id,
            price: item.price,
            imgUrl: item.imgUrl,
            goodName: item.goodName,
            sugarType: item.goodName == "美式" ? "" : this.selectTangOption,
          });
        }
      });
      if (coffeeGoods.length === 0) {
        this.$message.warn("请选择商品");
        this.spinning = false;
        return;
      }
      addOrder({
        coffeeGoods: coffeeGoods,
        orderPrice: this.orderPrice(),
        remink: this.remink,
      }).then((res) => {
        if (res.code == 200) {
          this.spinning = false;
          // 下单成功
          this.coffeeGoods = [];
          this.$message.success("新增成功");
          this.$emit("closeOrderModel");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    orderedDelete(index) {
      this.orderedList.splice(index, 1);
    },
  },
};
</script>
<style lang="less" scoped>
.remink-group {
  display: flex;
  margin: 0 15px 0px 0px;
  flex-wrap: wrap;
}

.remink-title {
  font-family: Noto Sans SC;
  font-size: 14px;
  font-weight: 400;
  margin: 5px 15px 10px 0px;
}
.remink-option {
  width: 52px;
  height: 30px;
  font-size: 14px;
  line-height: 15px;
  border-radius: 4px 0px 0px 0px;
  border: 0.5px solid #999999;
  margin-right: 7px;
  background-color: #fff;
  border-radius: 5px;
  // min-width: 50px;
  padding: 5px;
  text-align: center;
  color: #666666; /* 选中时的文字颜色 */
  margin-bottom: 10px;
}

.choseClass /deep/.ant-modal {
  width: 40% !important;
}
.choseClass /deep/.ant-modal-content {
  background-color: #fff !important;
}

/deep/.ant-modal-content {
  // height: 100% !important;
  // background-color: #e4ebf1;
}
/deep/.ant-modal-body {
  padding: 0;
}
/deep/.ant-modal-title {
  font-size: 24px;
  font-weight: 800px !important;
  margin: 10px 0;
}
.add-order {
  width: 100%;
  display: flex;
  height: 100%;
  // border: 1px solid #6d6969;
  border-radius: 5px;
  .ant-spin-spinning {
    top: 50%;
    left: 50%;
    position: absolute;
    display: inline-block;
    z-index: 2;
    opacity: 1;
  }
  .order-clear-right {
    padding: 10px 32px;
    position: absolute;
    right: 40px;
    bottom: 40px;
    // width: 64px;
    // height: 30px;
    border-radius: 27px;
    background-color: #2374da;
    color: #fff;
    font-family: Noto Sans SC;
    font-size: 20px;
    font-weight: 400;
    // line-height: 30px;
    text-align: center;
  }
}
.ordered-goods {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 30%;
  // height: 100%;
  // border-right: 1px solid #6d6969;
  margin-right: 20px;
  background-color: #fff;
  border-radius: 8px;
  .ordered-foot {
    // position: fixed;
    // bottom: 0px;
    min-height: 80px;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    margin: 10px;
    .ordered-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      padding: 0 20px;
      height: 40px;
      background-image: url("~@/assets/imgs/Mask group@2x.png");
      background-size: 100% 100%;
      border-radius: 8px;
    }
  }
}
.order-right-body {
  // height: 100%;
  min-width: 70%;
  background-color: #fff;
  border-radius: 8px;
  // position: relative;
}
.order-right-top {
  border-bottom: 1px solid #e8e8e8;
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
  font-family: Noto Sans SC;
  font-size: 20px;
  font-weight: 700;
  color: #333;
}
.order-right {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  // flex: 1;
  // height: 100%;
  // display: flex;
  // flex-wrap: wrap;
  // flex-direction: row;
  align-content: flex-start;
}
.ordered-title {
  height: 40px;
  line-height: 40px;
  font-weight: 700;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10px 20px;
}
.ordered-title-chiose {
  font-family: Noto Sans SC;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  // margin-left: 10px;
}

.ordered-title-clear {
  width: 64px;
  height: 30px;
  border-radius: 27px;
  background-color: #fff;
  color: #2374da;
  font-family: Noto Sans SC;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
}

.ordered-foot-btn {
  height: 40px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  background-color: #f5ac00;
  text-align: center;
  line-height: 40px;
  margin-top: 6px;
}
.goods {
  // width: 200px;
  // height: 80px;
  margin: 10px 10px;
  background-color: #fff;
  border: 1px solid #ebe8e8;
  border-radius: 16px;
  padding: 10px;
}
.coffee-goods {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  // padding: 5px;
  // box-sizing: border-box;
}
.coffee-img {
  width: 120px;
  height: 120px;
}
.coffee-goods-img {
  position: relative;
  width: 120px;
  height: 120px;
  img {
    height: 100%;
    width: 100%;
  }
  .zhaopI {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 56px;
    height: 24px;
    border-radius: 5px;
    text-align: center;
    line-height: 24px;
    color: #fff;
    background: #ff3d00;
  }
  .newshop {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 56px;
    height: 24px;
    border-radius: 5px;
    text-align: center;
    line-height: 24px;
    color: #fff;
    background: #32bfa2;
  }
}

.ordered-item-right {
  padding: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .coffee-number {
    width: 60px;
    height: 18px;
    display: flex;
    line-height: 18px;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin-left: 20px;
  }
  .icon-min,
  .icon-add {
    border-radius: 12px;
    // border: 1px;
    display: inline-block;
    text-align: center;
    font-size: 12px;
  }
  .icon-min {
    color: #006ac8;
    border: 1px solid #006ac8;
    width: 18px;
    height: 18px;
    line-height: 15px;
  }
  .icon-add {
    color: #fff;
    border: 1px solid #006ac8;
    background-color: #006ac8;
    width: 18px;
    height: 18px;
    line-height: 15px;
  }
  // .number {
  //   flex-wrap: 1;
  // }
}
.coffee-right {
  // padding-top: 10px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  // font-size: 12px;
  .goodName {
    font-family: Noto Sans SC;
    font-size: 16px;
    font-weight: 700;
    color: #333;
  }
  .des {
    font-family: Noto Sans SC;
    font-size: 16px;
    font-weight: 500;
    padding: 3px 0;
    color: #a3a3a3;
    // flex: auto;
    .desClass {
      padding: 2px 3px;
      border-radius: 4px;
      margin-left: 10px;
      background-color: #ffece6;
      color: #fb3d03;
      font-size: 14px;
    }
  }
  .price-left {
    display: flex;
    flex-direction: row;
    // align-items: end;
    // justify-content: space-between;
    font-size: 22px;
    font-family: Noto Sans SC;
    font-weight: 700;
    color: #ff3d00;
  }
}
.specs {
  font-weight: 500;
  font-size: 12px;
}
.goodName {
  // font-size: 12px;
}
.price {
  // align-self: flex-end;
}
.chioseModal {
}
.coffee-item {
  display: flex;
  .coffee-goodName {
    font-family: Noto Sans SC;
    font-size: 20px;
    font-weight: 800;
    color: #333;
    margin: 20px 30px 20px;
  }
  .coffee-guige {
    margin: 0px 30px 0px;
    font-family: Noto Sans SC;
    font-size: 18px;
    font-weight: 400;
    color: #333;
    margin-top: 30px;
  }

  .radio-option {
    margin: 0px 30px 0px;
    width: 86px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #999999;
    margin-right: 7px;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    color: #666666; /* 选中时的文字颜色 */
  }
  .radio-option.selected-text {
    font-family: Noto Sans SC;
    font-size: 18px;
    font-weight: 400;
    border: 1px solid #fdb199;
    color: #fb3d03;
    background-color: #ffece6;
  }
  .radio-group {
    font-family: Noto Sans SC;
    font-size: 18px;
    font-weight: 400;
    display: flex;
    height: 40px;
    margin: 10px 15px 0px 0px;
  }
  .selectedOption {
    font-family: Noto Sans SC;
    font-size: 16px;
    font-weight: 400;
    background-color: #f3f3f3;
    height: 40px;
    line-height: 40px;
    margin: 40px 0 18px;
    color: #666666;
    padding-left: 30px;
  }

  .tang-title {
    margin: 15px 30px 0px;
    font-family: Noto Sans SC;
    font-size: 18px;
    font-weight: 400;
    color: #333;
  }
  .tang-option {
    margin: 0px 30px 0px;
    width: 86px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #999999;
    margin-right: 7px;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    color: #666666; /* 选中时的文字颜色 */
  }
  .tang-option.selected-text {
    font-family: Noto Sans SC;
    font-size: 18px;
    font-weight: 400;
    border: 1px solid #fdb199;
    color: #fb3d03;
    background-color: #ffece6;
  }
  .tang-group {
    font-family: Noto Sans SC;
    font-size: 18px;
    font-weight: 400;
    display: flex;
    height: 40px;
    margin: 10px 15px 0px 0px;
  }

  .coffee-footer {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    line-height: 40px;
    .coffee-number {
      margin-top: 10px;
      width: 80px;
      height: 24px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
    }
    .icon-min,
    .icon-add {
      width: 22px;
      height: 22px;
      border-radius: 12px;
      // border: 1px;
      display: inline-block;
      font-size: 16px;
      text-align: center;
    }
    .icon-min {
      color: #006ac8;
      border: 1px solid #006ac8;
      width: 22px;
      height: 22px;
      line-height: 19px;
    }
    .icon-add {
      color: #fff;
      background-color: #006ac8;
      width: 22px;
      height: 22px;
      line-height: 22px;
    }
  }
}

.add-number {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  user-select: text;
}
.coffee-goodName {
  font-size: 20px;
  font-weight: 800;
}
.coffee-choice {
  margin-bottom: 5px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  /* border: 1px solid #666; */
  align-items: center;
}
// .coffee-img {
//   width: 50px;
//   margin-right: 10px;
// }
.ordered-content {
  flex: auto;
  // overflow: auto;
  border-top: 1px solid #e8e8e8;
  // border-bottom: 1px solid #6d6969;
  .ordered-top {
    // width: 30%;
    height: 150px;
    // background-color: #2379dd;
    background-image: url("~@/assets/imgs/Mask group@2x.png");
    background-size: 100% 100%;
    margin: 20px;
    padding: 20px;
    border-radius: 16px;
    font-family: Noto Sans SC;
    font-size: 14px;
    color: #fff;
    .infoName {
      font-weight: 400;
    }
    .info-de {
      font-weight: 500;
    }
  }
  .ordered-info {
    margin-bottom: 10px;
  }
}
.ordered-content-body {
  height: 300px;
  overflow: auto;
  // margin: 0 20px;
  // border-bottom: 1px solid #000;
  .remarkText {
    font-family: Noto Sans SC;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .ordered-clear {
    width: 54px;
    height: 26px;
    border-radius: 27px;
    border: 1px solid #024d8e;
    font-family: Noto Sans SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #024d8e;
  }
  .remark {
    // width: 100%;
    height: 150px;
    // overflow: auto;
    textarea {
      margin: 5px 0 5px 0;
      // width: 343px;
      width: 100%;
      border-radius: 4px;
      border: 1px solid #f3f3f3;
      background-color: #f9fafd;
      color: #999999;
    }
  }
}
// .content-footer{

// }
.ordered-content-item {
  display: flex;
  padding: 10px 0 5px;
  background-color: #fff;
  // margin-bottom: 2px;
  border-bottom: 1px solid #e8e8e8;
  margin: 0 20px;
  .coffee-p {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 16px;
    font-weight: bold;
    // margin-bottom: 8px;
  }
  .coffee-name {
    font-family: Noto Sans SC;
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  .Coffee-specification {
    text-align: center;
    width: 64px;
    padding: 2px 1px;
    border-radius: 4px;
    margin-top: 5px;
    background-color: #ffece6;
    color: #fb3d03;
    font-size: 11px;
  }
  .Coffee-specification2 {
    text-align: center;
    width: 52px;
    padding: 2px 3px;
    border-radius: 4px;
    margin-top: 5px;
    background-color: #ffece6;
    color: #fb3d03;
    font-size: 11px;
    margin-left: 10px;
  }
  .ordered-item-price {
    font-family: Noto Sans SC;
    font-size: 16px;
    font-weight: 500;
    color: #ff3d00;
  }
}
.ordered-item-index {
  width: 64px;
  img {
    width: 64px;
    height: 64;
    border-radius: 8px;
  }
}
.ordered-item-num {
  min-width: 20px;
  margin-left: 20px;
}
.ordered-item-price {
  flex: auto;
  text-align: right;
}
.ordered-item-delete {
  display: inline-block;
  color: red;
  width: 30px;
  margin-right: 10px;
  margin-left: 15px;
}
</style>
